<template>
    <div class="multi-thread-component-out">
        <div class="multi-thread-component-container">
            <div class="multi-thread-component-list">
                <div class="multi-thread-component-item" v-for="(item,index) in info" @click="fn(item)">
                    <!--<router-link :to="{name:'Live',params:{channelid:item.channelId,programid:item.id}}">-->
                    <div class="multi-thread-component-img">
                        <img v-lazy="item.stills+'?cmd=imageprocess/processtype/2/quality/100/width/300'"/>
                        <div v-if="item.status==2" class="multi-thread-component-state">直播中
                        </div>
                    </div>
                    <div  :class='{
                "multi-thread-component-title":curVid!=item.id,
                "multi-thread-component-title-active":curVid==item.id
                }'>{{item.programName}}
                    </div>
                 <!--   </router-link>-->
                </div>
                <div class="clearBoth"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {     // 直播流数据
                type: Array,
                default: function () {
                    return [];
                }
            },

        },
        data: function () {
            return {
                curVid: ""
            }
        },/*

        watch: {
            '$route' (to, from) {
                //刷新参数放到这里里面去触发就可以刷新相同界面了
                if (to.name == from.name) {
                    window.location.href = to.path;
                }
            }
        },*/
        mounted: function () {
  this.curVid=this.info[0].id;

        },
        methods: {
            fn: function (item) {   // item：遍历的直播流数据
                this.curVid = item.id;
                // 将当前选中的视频信息传递给父组件
                this.$emit("change", item);
            }
        }

    }
</script>

<style>
    .multi-thread-component-out {
        border-bottom: 5px solid #f5f5f5;
        overflow: hidden;
    }

    .multi-thread-component-container {
        width: 100%;
        box-sizing: border-box;
        overflow-x: scroll;
        padding-bottom: 10000px;
        margin-bottom: -10000px;

    }

    .multi-thread-component-list {
        list-style: none;
    }

    .multi-thread-component-item {
        float: left;
        width: 111px;
        margin: 0 2px;
    }

    .multi-thread-component-img {
        width: 100%;
        height: 62px;
        margin-bottom: 5px;
        position: relative;
    }

    .multi-thread-component-img img {
        width: 100%;
        height: 100%;
    }

    .multi-thread-component-state {
        position: absolute;
        top: 0.3rem;
        right: 0.3rem;
        padding: 0.1rem;
        font-size: 0.7rem;
        color: #FFFFFF;
        background-color: #FF753F;
    }

    .multi-thread-component-title, .multi-thread-component-title-active {
        font-size: 12px;
        line-height: 12px;
        height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-decoration: none;
    }

    .multi-thread-component-title {
        color: #444444;
    }

    .multi-thread-component-title-active {
        color: #FF753F;
    }

    .multi-thread-component-list {
        margin: 5px 2px;
        margin-left: -30000px;
        left: 30000px;
        position: relative;
        float: left;
    }
    .multi-thread-component-list a{
        text-decoration: none;
    }
</style>